var compositeOperation = 'source-atop', circle;
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var oMod = document.getElementById('mode');

window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize(e) {
    c.width = window.innerWidth * window.devicePixelRatio;
    c.height = window.innerHeight * window.devicePixelRatio;
}
handleWindowResize();

oMod.addEventListener('change', handleModeChange, false);

function handleModeChange(e) {
    compositeOperation = oMod.value;
}

function Circle(x, y, r) {
    if(!circle) {
        this.x = x;
        this.y = y;
        this.r = r || 100;
        circle = this;
    }
    return circle;
}
Circle.prototype.update = function(ctx) {
    this.draw(ctx);
};
Circle.prototype.draw = function(ctx) {
    ctx.save();
    ctx.fillStyle = 'orange';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
circle = new Circle(c.width / 2, c.height / 2, 100);

//处理位置关系
c.addEventListener('mousemove', handleMousemove, false);
function handleMousemove(e) {
    e = e || window.event;
    circle.x = e.clientX;
    circle.y = e.clientY;
}

//绘制文本背景
function drawText(text) {
    ctx.save();
    ctx.font = '240px Arial';
    ctx.fillStyle = 'pink';
    var measure = ctx.measureText(text);
    ctx.fillText(text, c.width / 2 - measure.width / 2, 280);
    ctx.restore();
}

(function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.globalCompositeOperation = compositeOperation;
    drawText('HTML5');
    circle.update(ctx);
})();